<template>
  <q-btn-group
    class="d-flex just-center box-shadow-none items-center"
    :class="[bgColor, lineHeight]"
  >
    <q-btn
      v-for="(item, index) in rebuild_btn_list"
      :key="`${item.label}${index}`"
      :label="item.label"
      :style="{width: item.width}"
      @click="$emit('which', item.type)"
      :class="['panda-btn-light-dense', 'q-mr-md', item.class]"
    ></q-btn>
  </q-btn-group>
</template>

<script>
export default {
  props: {
    lineHeight: {
      default: "line-height-45px" // 设置行高样式
    },
    bgColor: {
      default: "" // 设置背景传入样式有bug
    },
    btn_list: {  // 设置按钮选项
      required: true,
      type: Array,
      default() {
        return [
          {
            label: "新增",
            width: "90px",
            class: "panda-btn-light-dense",
            type: "open"
          },
          {
            label: "修改",
            width: "90px",
            class: "panda-btn-light-dense",
            type: "modify"
          }
        ];
      }
    }
  },
  computed: {
    //初始化父组件传来的btnList
    rebuild_btn_list() {
      if (Array.isArray(this.btn_list)) {
        return this.btn_list.map((x, index) => {
          let style = {
            id: index,
            width: "90px",
            class: "panda-btn-light-dense",
            type: "open",
            label: "新增"
          };
          return Object.assign(style, x);
        });
      }
      return [];
    }
  }
};
</script>